import "./index.scss";
import logo from "@/assets/logo.png";
import { Form, Input, Checkbox, Button, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useDispatch } from "react-redux";
import { useHistory, useLocation } from "react-router-dom";
// 导入action
import { login } from "@/store/actions";

const Login = () => {
    const dispatch = useDispatch();
    const history = useHistory();
    const location = useLocation();
    // location 获取路由信息：地址  ?字符串  hash #符号后  state路由传值
    // 表单完成输入校验通过，触发的事件
    const onFinish = async (values) => {
        try {
            // 需要提交数据
            const { mobile, code } = values;
            // 进行登录
            await dispatch(login(mobile, code));
            message.success("登录成功");
            // 跳转首页（如果有来源页面returnUrl就跳转这个地址）
            history.replace(location?.state?.returnUrl || "/");
        } catch (e) {
            message.error(e.response?.data?.message || "登录失败");
        }
    };

    return (
        <div className="login">
            <div className="login-container">
                <img className="login-logo" src={logo} alt="" />
                {/* 登录表单 */}
                {/* size="large" 表达元素尺寸 */}
                {/* validateTrigger={["onChange","onBlur"]} 校验触发时机，改变和失去焦点触发校验 */}
                {/* autoComplete="off" 原生属性，不需要自动填充 */}
                <Form
                    size="large"
                    validateTrigger={["onChange", "onBlur"]}
                    autoComplete="off"
                    onFinish={onFinish}
                    initialValues={{
                        mobile: "13911111111",
                        code: "246810",
                        isAgree: true,
                    }}>
                    {/* rules 就是校验规则，可以有多个校验规则 */}
                    {/* name 表单项的名字，也是将来数据的名字 */}
                    <Form.Item
                        name="mobile"
                        rules={[
                            { required: true, message: "请输入手机号" },
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: "手机号格式不对",
                            },
                        ]}>
                        <Input
                            prefix={<UserOutlined />}
                            placeholder="请输入手机号"
                        />
                    </Form.Item>
                    <Form.Item
                        name="code"
                        rules={[
                            { required: true, message: "请输入验证码" },
                            { len: 6, message: "验证码是6个字符" },
                        ]}>
                        <Input
                            prefix={<LockOutlined />}
                            placeholder="请输入验证码"
                        />
                    </Form.Item>
                    <Form.Item
                        name="isAgree"
                        rules={[
                            {
                                validator: (_, value) => {
                                    if (value === true)
                                        return Promise.resolve();
                                    else
                                        return Promise.reject(
                                            new Error("请勾选我已阅读并同意")
                                        );
                                },
                            },
                        ]}
                        valuePropName="checked">
                        <Checkbox>
                            我已阅读并同意「用户协议」和「隐私条款」
                        </Checkbox>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" block>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};

export default Login;
